<template>

   <page-view>
       <page-header :showBack="true" title="登录"></page-header>
       <div class="content-box">
           <Form @failed="onFailed">
            <cell-group inset>
                <!-- 通过 pattern 进行正则校验 -->
                <field
                v-model="value1"
                name="pattern"
                placeholder="正则校验"
                :rules="[{ pattern, message: '请输入正确内容' }]"
                />
                <!-- 通过 validator 进行函数校验 -->
                <field
                v-model="value2"
                name="validator"
                placeholder="函数校验"
                :rules="[{ validator, message: '请输入正确内容' }]"
                />
                <!-- 通过 validator 返回错误提示 -->
                <field
                v-model="value3"
                name="validatorMessage"
                placeholder="校验函数返回错误提示"
                :rules="[{ validator: validatorMessage }]"
                />
                <!-- 通过 validator 进行异步函数校验 -->
                <field
                v-model="value4"
                name="asyncValidator"
                placeholder="异步函数校验"
                :rules="[{ validator: asyncValidator, message: '请输入正确内容' }]"
                />
            </cell-group>
            <div style="margin: 16px;">
                <Button round block type="primary" native-type="submit">
                提交
                </Button>
            </div>
        </Form>

       </div>
   </page-view>
</template>

<script>
import PageHeader from '../components/PageHeader.vue'
import { Form, Field, CellGroup,Button } from 'vant';
export default {
  components: {PageHeader,Form, Field, CellGroup,Button },
    setup () {
        

        return {}
    }
}
</script>

<style lang="scss" scoped>

</style>